import React, { Component } from 'react'
import BetterScroll from 'better-scroll'

class GoodFood extends Component {
  componentDidMount() {
    setTimeout(this.init, 600)
  }
  componentWillUnmount() {
    this.bs.destroy()
  }
  init = () => {
    this.bs = new BetterScroll('.home-goodfood-container', {
      probeType: 3,
      click: true,
      pullUpLoad: true
    })
    this.bs.on('pullingUp', () => {
      // 读取父组件完成数据读取
      this.props.loadData().then(ret => {
        if (ret) {
          // 如要数据有变化，我重新刷新一次
          setTimeout(() => {
            this.bs.refresh()
          }, 200)
        }
      })
      // 告知BetterScroll上拉已完成操作 -- 不能去
      this.bs.finishPullUp()
    })
  }

  render() {
    return (
      <>
        <div className="home-goodfood-container-title">精品好菜</div>
        <div className="home-goodfood-container">
          <div className="item">
            {this.props.data.map(item => (
              <dl>
                <dt>
                  <img src={item.img} alt="" />
                </dt>
                <dd>
                  <h3>{item.name}</h3>
                  <p>1000浏览 {item.favorites}收藏</p>
                </dd>
              </dl>
            ))}
          </div>
        </div>
      </>
    )
  }
}

export default GoodFood
